<template>
  <div>
    <img src="@/assets/img/pageimg/bg_01.jpg" class="w-full" alt="背景01">
    <div class="w-full h-full relative">
      <img src="@/assets/img/pageimg/bg_02.jpg" class="relative w-full" alt="">
      <div class=" absolute top-4 right-6">
        <a href="https://www.taptap.cn/app/238888"> <img src="@/assets/img/pageimg/morenews.png"
            class="w-[5.5rem] h-[1.7rem] " alt="了解更多"></a>
      </div>
      <!-- 预约按钮 -->
      <div class=" absolute left-[50%] top-[45%] ml-[-3.89335rem] yydhclass" @click="yybuton">
        <img src="@/assets/img/pageimg/ljyybutton.png" class="w-[7.7867rem] h-[2.9867rem] md:w-[10rem] md:h-[3rem]" alt="">
      </div>
    </div>
    <div class="">
      <img src="@/assets/img/pageimg/bg_03.jpg" alt="" class="w-full">
    </div>
    <div class="bg_img_04">
      <div class="flex justify-center pt-1 pb-3">
        <div class=" flex justify-center flex-col items-center">
          <img src="@/assets/img/pageimg/logo.png" class="w-[58%]" alt="公司logo">
          <div class="flex justify-center flex-col items-start">
            <p class="mt-3">明日世界（上海）网络科技有限公司</p>
            <p>沪ICP备案17036270号-1</p>
            <p>增值电信业务经营许可证：沪B2-20170436</p>
            <p>网络文化经营许可证：沪网文（2020） 3528-249号</p>
          </div>
        </div>

      </div>
    </div>
    <!-- 弹框 -->
    <div class="modelbox" v-if="isbox">
      <div class="modexboxcontent">
        <div class=" z-[1045] flex justify-center items-center w-[100vw] h-[96vh]">
          <div>
            <div @click="isbox = false" class="flex justify-end mb-1">
              <img class="w-[32px]" src="@/assets/img/model/xx.png" alt="">
            </div>
            <!-- 成功内容 -->
            <div class="modelsuccessbg w-[95vw] h-[17.2933rem] flex justify-center items-end" v-if="issuccess">
              <a href="https://www.taptap.cn/app/238888"><img src="../assets/img/success/yybutton.png"
                  class="w-[9.3733rem] h-[2.4rem] mb-3" alt=""></a>

            </div>
            <!-- 失败内容 -->
            <div class="modelboxbg  w-[95vw] h-[9.9467rem]" v-if="iserror">
              <div class="flex justify-center pt-2">
                <p class="font-bold">预约失败</p>
              </div>
              <div class="flex justify-center mt-5">
                <p class="text-[black]">信息有误，请填写正确的号码。</p>
              </div>
              <div class="flex justify-center mt-4">
                <div class="errorbutton w-[9.3733rem] h-[2.4rem]  flex justify-center items-center ">
                  <p class="text-[rgb(75,37,12)] font-bold">请重新输入</p>
                </div>
              </div>

            </div>
            <!-- 表单内容 -->
            <div class="modelboxbg  w-[95vw]" v-if="!issuccess">
              <div class="flex justify-center pt-4">
                <p><img :src="sbis" class="w-[4.4533rem] h-[1.09333rem]" alt=""></p>
              </div>
              <!-- 表单 -->
              <div class="flex justify-center pt-8">
                <div class="w-[70%]">
                  <div class="px-2">
                    <input type="tel" maxlength="11" class="text-[black]" v-model="popform.telphone"
                      placeholder="请输入手机号">
                  </div>
                  <div class="mt-1">
                    <hr class="h-[1px] bg-slate-600">
                  </div>
                  <div class="px-2 flex">
                    <input type="tel" class="text-[black] w-[9rem]" maxlength="6" v-model="popform.code"
                      placeholder="请输入验证码">
                    <button v-if="showtext" @click="sendCode()"
                      class="bg-[rgb(250,200,36)] w-[5.4667rem] h-[2.3rem] text-[0.8rem] rounded-3xl text-center"
                      :disabled="iscode">发送验证码</button>
                    <button v-if="!showtext" disabled
                      class="bg-[rgb(184,184,184)] w-[5.4667rem] h-[2.3rem] text-[0.8rem] rounded-3xl text-center">剩余{{
                        miaonum
                      }}秒</button>
                  </div>
                  <div class="mt-1">
                    <hr class="h-[1px] bg-slate-600">
                  </div>
                  <!-- 立即预约 -->
                  <div class="flex justify-center mt-3" @click="submit()">
                    <img class="w-[9.3733rem] h-[2.4rem]" src="../assets/img/model/ljyy.png" alt="">
                  </div>
                  <!--  -->
                  <div class="flex justify-center mb-2 mt-1">
                    <div class="text-[rgb(75,37,12)] text-[0.4267rem]">
                      *预约后默认同意接收游戏相关推送短信至手机
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
    <!-- <Modalyypage></Modalyypage> -->
  </div>
</template>

<script>
import azpath from '../assets/img/model/Android@2x.png'
import qs from "qs"
import Modalyypage from '../components/Modalyypage.vue';
import showToast from 'vant';
export default {
  name: 'indexPage',
  data() {
    return {
      sbis:azpath,
      iscode: true,
      iserror: false,
      issuccess: false,
      showtext: true,
      isbox: false,
      miaonum: 59,
      // 预约表单
      popform: {
        telphone: '',
        code: ''
      },
    }
  },
  watch: {
    "popform.telphone": function () {
      if (this.popform.telphone.length == 11) {
        this.iscode = false
      }
    }
  },
  created(){
    this.initbaidu()
  },
  components: {
    Modalyypage,
  },
  methods: {
    initbaidu(){
      if (this.$route.query.id == '3') {
          console.log('android')
          window._hmt && window._hmt.push(['_trackEvent', '影视大全-初始化', 'h5', 'initpage']);
        }
    },
    submit() {
      if (this.popform.code) {
        this.$http({
          method: "post",
          url: 'https://gameapi.nextjoy.com/appointment/appoint',
          data: qs.stringify({
            pubkey: '48a3e38773709ee451b971ce5d517da5',
            mobile: this.popform.telphone,
            from_type: 1,
            code: this.popform.code
          })
        }).then(res => {
          console.log(this.popform.telphone, this.popform.code)
          this.issuccess = true
        }).catch(res => {
          this.issuccess = false
          this.iserror = true
        })
      } else {
        this.$toast.fail(`验证码不能为空`);
      }
      if (!this.popform.telphone) {
        this.$toast.fail(`手机号不能为空`);
      }
    },
    // 立即预约
    isAndroidOrIOS() {
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        console.log('android')
        this.isbox = true
        this.issuccess = false
        return "android"
      }
      if (isiOS) {
        try {
          this.isbox = true
          this.issuccess = false
          window.open('https://apps.apple.com/cn/app/id1639842761')
        } catch (error) {

          let url = 'https://apps.apple.com/cn/app/id1639842761'
          window.location = url
        }
        return "ios"

        console.log('ios')
      }
      return false
    },
    yybuton() {
      const ua = window.navigator.userAgent
      if (ua.indexOf('Android') >= 0) {
        if (this.$route.query.id == '3') {
          console.log('android')
          window._hmt && window._hmt.push(['_trackEvent', '影视大全-android', 'h5', 'clickbutton']);
          // window.open('https://apps.apple.com/cn/app/id1639842761')
        }
        this.isbox = true
        this.issuccess = false
      } else {
        if (this.$route.query.id == '3') {
          console.log('ios')
          window._hmt && window._hmt.push(['_trackEvent', '影视大全-ios', 'h5', 'clickbutton']);
          window.open('https://apps.apple.com/cn/app/id1639842761')
        }else{
          window.open('https://apps.apple.com/cn/app/id1639842761')
        }
      }

    },
    // 获取验证码
    sendCode() {
      if (this.popform.telphone) {
        this.$http({
          method: "post",
          url: 'https://gameapi.nextjoy.com/appointment/sendcode',
          data: qs.stringify({
            pubkey: '48a3e38773709ee451b971ce5d517da5',
            mobile: this.popform.telphone
          })
        }).then(res => {
          if (res.data.status != '200') {
            this.$toast.fail(`${res.data.message}`);
          } else {
            this.showtext = false
            if (this.timer) clearInterval(this.timer)
            this.timer = setInterval(() => {
              this.miaonum -= 1;
              if (this.miaonum === 0) {
                this.showtext = true;
                if (this.timer) clearInterval(this.timer)
                this.miaonum = 59;
              }
            }, 1000);
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        this.$toast.fail(`请输入手机号`);
      }
    }
  }
}
</script>

<style scoped>
.errorbutton {
  background: url(../assets/img/model/bigbutton.png) no-repeat;
  background-size: 100% 100%;
}

.modelboxbg {
  background: url(../assets/img/model/bgimg.png) no-repeat;
  background-size: 100% 100%;
}

.modelsuccessbg {
  background: url(../assets/img/success/yysuccess.png) no-repeat;
  background-size: 100% 100%;
}

/* 弹框代码 */
.modelbox {
  position: fixed;
  left: 0px;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);

}

.modexboxcontent {
  position: absolute;
  color: #fff;
  z-index: 1041;
}
input {
  outline: none;
}
@keyframes myfirst {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

.yydhclass {
  -webkit-animation: myfirst 0.5s infinite;
  animation: myfirst 0.5s infinite;
}

.bg_img_04 {
  color: #ffffff;
  font-size: 0.6133rem;
  width: 100vw;
  /* height: 12rem; */
  background: url('@/assets/img/pageimg/bg_04.jpg') no-repeat;
  background-size: 100% 100%;
}


</style>
